@adapt-design-system/tokens

adapt-design-system/tokens

Design Tokens for the ADAPT Design System

Using the tokens in your project

1. Install library

yarn add @adapt-design-system/tokens

2. Transform tokens into the data you need

#Example:

// FontSizes Tokens in package
export default [
  {
    name: 'uber',
    value: 111,
    unit: 'px',
    lineHeight: 1.08,
  },
  {
    name: 'hero',
    value: 77,
    unit: 'px',
    lineHeight: 1.11,
  },
  // ...
];

import { FontSizes } from '@adapt-design-system/tokens';

// Take each font size and transform them to an object
const fontSizes = () => {
  const output = {};
  FontSizes.map(({ name, value, unit }) => (output[name] = `${value}${unit}`));
  return output;
};

// Sample Output:
const fontSizes: {
    uber: '111px',
    hero: '77px'
}

1. You're ready to go! Import components as you need them. Check out the docs

Developing

Install

1. Install dependencies (monorepo users: remember to be in the /packages/adapt-design-system-tokens folder).

yarn install

1. To actively develop tokens, it's best to run the docs site to see how changes in tokens affect the output.

yarn develop

The build will re-run every time you save changes to the tokens.

Publish new version

To publish a new version run yarn publish-package. If you introduce a breaking change, bump the major version (2.0.3 -> 3.0.0). If you add new (non-breaking) functionality bump the minor version (2.0.3 -> 2.1.0). Otherwise bump patch when adding new icons (2.0.3 -> 2.0.4). You will be asked for a new version.

⚠️ Important!

Don't forget to upgrade the consuming packages, in this case /packages/core, to make use of the new version. Like so: yarn upgrade @adapt-design-system/tokens@^2.0.4